@charset "UTF-8";
* {
  padding: 0;
}

.center {
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

a {
  display: inline-block;
}

body {
  background-color: #fafafa;
}

.banner {
  height: 70px;
  line-height: 70px;
  width: 100%;
  background-image: url(../img/login/banner-1.png);
  background-repeat: no-repeat;
  margin-top: 50px;
}

.title {
  font-size: 38px;
  margin: 30px 0;
}

.login {
  padding-top: 70px;
  width: 490px;
  height: 300px;
  background-color: #4f545f;
  font-size: 12px;
  color: #f3f3f3;
  border-radius: 5px;
}

.username,
.password {
  height: 40px;
  width: 400px;
  text-indent: 1em;
  margin: 0 auto;
  border-radius: 5px;
}

.password {
  margin: 30px 0;
}

.prompt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 20px;
  width: 400px;
  margin: 0 auto;
  margin-bottom: 10px;
}

.remmber {
  margin-right: 5px;
  position: relative;
  top: -1px;
}

.gray {
  position: relative;
  left: -20px;
  color: #bbbbbb;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.help {
  color: #53c9c6;
}

.btn {
  width: 180px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
}

.log-on {
  background-color: #53c9c6;
  color: #fff;
  margin-right: 40px;
}

.log-on:hover {
  background-color: #13c2c2;
}

.post:hover {
  background-color: #f7f7f7;
}

.change-login {
  height: 50px;
  line-height: 50px;
  width: 400px;
  margin: 0 auto;
  text-align: left;
}

.tweet,
.qq {
  position: relative;
  top: 6px;
  width: 25px;
}

.tweet-login {
  margin-right: 15px;
}

.agree {
  margin-top: 24px;
  font-size: 12px;
  line-height: 16px;
  color: #99a2aa;
  margin-bottom: 30px;
}

.agree a {
  color: #53c9c6;
}

/**********************火焰特效*********************/
.fire {
  font-size: 30px;
  -webkit-animation: fireDiv 1s infinite;
          animation: fireDiv 1s infinite;
  color: #53c9c6;
  text-align: center;
  font-family: "微软雅黑";
}

@-webkit-keyframes fireDiv {
  0% {
    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
  }
  25% {
    text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3, -3px -20px 11px #f80, 4px -30px 22px #f20;
  }
  50% {
    text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3, -4px -25px 11px #f80, 4px -35px 25px #f20;
  }
  75% {
    text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3, -3px -20px 11px #f80, 4px -30px 22px #f20;
  }
  100% {
    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
  }
}

@keyframes fireDiv {
  0% {
    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
  }
  25% {
    text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3, -3px -20px 11px #f80, 4px -30px 22px #f20;
  }
  50% {
    text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3, -4px -25px 11px #f80, 4px -35px 25px #f20;
  }
  75% {
    text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3, -3px -20px 11px #f80, 4px -30px 22px #f20;
  }
  100% {
    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
  }
}
